<template>
  <view @click="closePop" class="item-box" v-if="commentObj && commentObj !='null'">
    <view v-if="curpage" class="top">
      <view style="display: flex">
        <u-avatar :src="commentObj.avatar?commentObj.avatar:imageAvatar" size="80rpx" mode="aspectFill"></u-avatar>
        <view class="top_right">
          <text class="name">{{ commentObj.nickName ? commentObj.nickName : '1111' }}</text>
          <view class="rate_box">
            <u-rate size="24rpx" activeColor="rgba(255, 135, 15, 1)" inactiveColor='rgba(214, 214, 214, 1)' :count="5" v-model="rateValue"></u-rate>
            <!-- <span style="fontSize: 28rpx">{{ rateValue + '.0' }}</span> -->
          </view>
          <!-- 此处增加遮罩用来禁止用户触发评分 -->
          <view class="rate_mask"></view> 
        </view>
      </view>
      <view class="bot">
		  <!--  userInfo.id != commentObj.petOwnerId 宠物评价，暂无判断是否是自己的评价 -->
        <view  v-if="userInfo.id != commentObj.petOwnerId"  @click.stop="reportComment(commentObj)" class="pop_box">
          <u-icon name="more-dot-fill"></u-icon>
          <u-transition :show="commentObj.popShow">
            <view class="pop">
              <!-- <view @click.stop="report"> 举报 </view> -->
              <!-- <view @click.stop="dontLook"> 屏蔽 </view> -->
			   <!-- <view @click.stop="reportComment(commentObj)" > 举报 </view> -->
            </view>
          </u-transition>
        </view>
  <!--      <view v-else-if="showName">
          <span v-show="commentObj.anonymousFlag == 1">已匿名</span>
        </view> -->
      </view>
    </view>
<!--    <view class="rate_box" style="justify-content: flex-start" v-else>
      <u-rate size="22" activeColor="#FF4B00" :count="5" v-model="rateValue"></u-rate>
      <span style="color: #D0D0D0;fontSize: 28rpx">{{ rateValue | starsFilters }}</span>
      <view class="rate_mask"></view>
    </view> -->
    <view class="bottom">
      <text class="con">{{ commentObj.content }}</text>
      <view style="margin-bottom: 10rpx" v-if="commentObj.imgList">
        <u-album :multipleSize="multipleSize" :urls="commentObj.imgList.split(',')"></u-album>
      </view>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  props: {
    commentObj: {
      type: Object,
    },
    commentType: {
      default: 2, // 1 服务评价  2 商品评价
    },
    multipleSize: {
      type: String | Number,
      default: '110'
    }
  },
  data () {
    return {
      rateValue: null,
      showName: false,
	   imageAvatar:'https://res.jiyaqi.com/pet/miniapp/public/user.png'
    }
  },
  computed: {
    ...mapState('user', ['token','userInfo', 'hasLogin']),
    curpage () {
      return !this.$curPage().route.includes('goodsCommon/goodsCommon') && !this.$curPage().route.includes('course/courseComment')
    },
  },
  created () {
	  
    if (this.$curPage().route.includes('pages/goodsCommon/goodsCommon') || this.$curPage().route.includes('pages/course/courseComment'))
      this.showName = true
      this.rateValue = this.commentObj.stars || this.commentObj.star || 0
  },
  filters: {
    starsFilters (val) {
      switch (val) {
        case 1:
          return '非常差'
        case 2:
          return '差'
        case 3:
          return '一般'
        case 4:
          return '满意'
        case 5:
          return '超赞'
        default:
          break;
      }
    }
  },
  mounted(){
	  console.log(103,this.commentObj)
  },
  methods: {
    // ...mapActions('common', ['reportComment', 'shieldComment']),
    //点击外部用来关闭举报弹窗
    closePop () {
      this.commentObj.popShow = false
      this.$forceUpdate()
    },
    //切换举报弹窗
    changePopShow () {
      // this.commentObj.popShow = !this.commentObj.popShow
      // this.$forceUpdate()
    },
    async dontLook () {
		
		return
      // console.log('点击了屏蔽')
      // let params = {
      //   targetId: this.commentObj.id,
      //   targetType: this.commentType,
      // }
      // const res = await this.shieldComment(params)
      // if (res.code == 200) {
      //   uni.$u.toast('屏蔽成功')
      //   this.$emit('shield', this.commentObj.id)
      // }
      // this.$emit('shield', this.commentObj.id)
      // this.closePop()
    },
    async report () {
      // console.log('点击了举报')
      // let params = {
      //   targetId: this.commentObj.id,
      //   targetTitle: this.commentObj.content,
      //   targetForm: this.commentType,
      // }
      // const res = await this.reportComment(params)
      // if (res.code) {
      //   uni.$u.toast('举报成功')
      // }
      // this.commentObj.popShow = false
      // this.closePop()
    },
	reportComment(item) {
		 if(!this.token) {
		        this.isHasLogin()
		        return
		 }
		this.$emit('reportComment', item);
	}
  },
}
</script>

<style lang="scss" scoped>
.item-box {
  // background-color: #fff;
  // border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  // padding: 20rpx;
  // margin: 20rpx 0;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top_right {
		padding: 6rpx 0;
      .name {
        font-size: 28rpx;
        font-weight: 500;
      }
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 15rpx;
      position: relative;
      text {
        padding-left: 8rpx;
      }
    }
  }
  .rate_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    span {
      margin-left: 10rpx;
      color: $base-color-shop;
    }
  }
  .rate_mask {
    width: 100%;
    height: 100rpx;
    position: absolute;
  }
  .portrait {
    flex-shrink: 0;
    width: 80rpx;
    height: 80rpx;
    border-radius: 100px;
  }
  .bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-base;
    color: $font-color-base;
    .pop_box {
      position: relative;
      .pop {
        position: absolute;
        right: 40rpx;
        bottom: 0;
        width: 120rpx;
        height: 50rpx;
        background-color: #ffff;
        box-shadow: 0px 0px 16rpx 6rpx #f8f8f8;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-radius: 10rpx;
        view {
          width: 100%;
          height: 60rpx;
          line-height: 50rpx;
          text-align: center;
        }
      }
    }
    .con {
      overflow: hidden;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: ellipsis;
      font-size: $font-base;
      color: $font-color-dark;
      padding: 20rpx 0;
    }
    .bot {
      display: flex;
      justify-content: space-between;
      font-size: $font-sm;
      color: $font-color-light;
    }
  }
}
::v-deep uni-image > div,
::v-deep uni-image > img {
  border-radius: 12rpx;
}
</style>
